<template>
    <div class="xiangqing">

        <div class="top">

            <div class="top_top">
                <div class="top_nav clearfix">
                    <span class="top_left"> < </span>
                    <span class="top_right"> > </span>
                </div>

                <div class="top_jieshao">
                    <div class="top_jieshao_img"> 
                        <img class="jieshao_img" src="https://fuss10.elemecdn.com/b/ae/84f53ab9b9b0c99cbde4d98ecf495png.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/" alt="">                        
                    </div>
                
                    <div class="jieshao_dianpu">
                        <h2>将太无二(北京崇文门新世界店)</h2>
                        <p>蜂鸟转送 / 42分钟送达 / 配送费￥5</p>

                        <div class="jieshao_gonggao">
                            <span>公告：</span>
                            <span>欢迎光临，用餐高峰期请提前下单，谢谢。</span>
                        </div>
                    </div>
                </div>

                <div class="top_houdong">
                    <div>
                        <span class="houdong_shou">
                            首
                        </span>

                        <span class="houdong_xiangqing">
                            新用户下单立减17元(不与其它活动同享)
                        </span>
                    </div>
                    

                    <div class="houdong_houdong">
                        3个活动
                    </div>
                </div>

            </div>

        </div>

        <nav class="nav_top">
            <div class="nav_left">
                <span>商品</span>
            </div>
            <div class="nav_zhong">
                <span>评价</span>
            </div>
            <div class="nav_right">
                <span>店铺</span>
            </div>
        </nav>

        <main class="main">
        
            <section class="table">
                <article class="sidebar">
                    <ul class="nav">
                        <li class="curr">优惠</li>
                        <li>主厨推荐寿司</li>
                        <li>刺身</li>
                        <li>前菜及汤</li>
                        <li>天妇罗及炸类</li>
                        <li>沙拉</li>
                        <li>火锅及炖菜</li>
                        <li>烧烤类</li>
                        <li>面饭类</li>
                        <li>热销</li>
                        <li>特色料理</li>
                        <li>鳗鳗的爱</li>
                    </ul>
                </article>
                <div class="table_box">
                    <dl>
                        <dt>
                            <h3>优惠</h3>
                            <span>美味又实惠, 大家快来抢!</span>
                        </dt>
                        <dd></dd>
                    </dl>
                </div>
            </section>

        </main>
        

    </div>
</template>

<script>
export default {
  name: "xiangqing"
};
</script>

<style lang="less">
.pxToRem(@p, @px) {
  @{p}: @px / 75px * 1rem;
}
.px2rem(@name, @px) {
    @{name}: @px / 108 * 1rem;
}

@bck:white;
.search{
    background: @bck;
    .px2rem(height, 100);
    
    a{
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }
}

.top {
  width: 100%;
  background: #adadad;
  color: #fff;
  .top_top {
    width: 90%;
    margin-left: 5%;
    .top_nav {
      .pxToRem(line-height, 80);
      .top_left {
        float: left;
        .pxToRem(font-size, 50);
      }
      .top_right {
        float: right;
        .pxToRem(font-size, 50);
      }
    }
    .top_jieshao {
      display: flex;
      .top_jieshao_img {
        .jieshao_img {
          border: 1px solid #fff;
          width: 70%;
          display: block;
        }
      }
      .jieshao_dianpu {
        h2 {
          .pxToRem(line-height, 50);
          .pxToRem(font-size, 30);
          font-weight: 700;
        }
        p {
          .pxToRem(line-height, 35);
        }
        .jieshao_gonggao {
          .pxToRem(line-height, 45);
        }
      }
    }
    .top_houdong {
      display: flex;
      .pxToRem(font-size, 25);
      .houdong_shou {
        .pxToRem(line-height, 50);
        background: #54ff9f;
        .pxToRem(padding-left, 5);
        .pxToRem(height, 25);
        color: #fff;
      }
      .houdong_xiangqing {
        .pxToRem(padding-left, 20);
      }
      .houdong_houdong {
        .pxToRem(line-height, 50);
        position: absolute;
        right: 0;
        .pxToRem(padding-right, 50);
      }
    }
  }
}

.nav_top {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 999;
  display: flex;
  div {
    flex: 1;
    text-align: center;
    .pxToRem(line-height, 80);
    background-color: #fff;
    .pxToRem(font-size, 25);
    border-bottom: 1px solid #ccc;
  }
  .nav_left {
    border-bottom: 3px solid #3190e8;
    color: #3190e8;
    font-weight: 700;
  }
}

.main {
  .table {
    // .txh();
    // position: fixed;
    // left: 0;

    .sidebar {
      width: 25%;
      position: fixed;
      left: 0;
      .px2rem(top,504);
      .px2rem(bottom,88);
      overflow-y: scroll;
      box-sizing: border-box;
      .nav {
        li {
          .px2rem(line-height,172);
          .px2rem(font-size,42);
          text-align: center;
          box-sizing: border-box;
          border-bottom: 1px #dcdcdc solid;
          font-weight: bolder;
          color: #666;
        }
        .curr {
          background: white;
          color: #000;
        }
      }
    }
    .table_box {
      position: fixed;
      left: 25%;
      .px2rem(top,504);
      .px2rem(bottom,150);
      overflow-y: scroll;
      display: flex;
      width: 75%;
      box-sizing: border-box;

    }
  }
}
</style>
